<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {margin: 0;}
        header {
            padding: 10px;
            background: #0099ff;
            color: white;
            text-align: center;
            font-size: 18px;
        }
        form {
            text-align: center;
            padding: 5px;
        }
        form div {
            margin: 5px 0;
        }
        form input {
            width: 90%;
            font-size: 16px;
            line-height: 30px;
            border-radius: 5px;
        }
        form input[type="submit"] {
            margin-top: 20px;
            background: #0099ff;
            color: white;
            border: 0;
        }
    </style>
</head>
<body>
    <header>登录</header>
    <h4>我要登录</h4>
    <form action="#">
        <div>
            <label for="">姓名</label>
            <input name="username" type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label for="">密码</label>
            <input name="password" type="password" placeholder="请输入密码">
        </div>
        <div>
            <input type="submit" value="登录">
        </div>
    </form>
    <script>
        //监听表单提交事件
        var form = document.querySelector('form')
        form.onsubmit = function (e) {
            e.preventDefault()  
            console.log(e);
            //获取用户名和密码
            var username = document.querySelector('input[name="username"]').value
            var password = document.querySelector('input[name="password"]').value
            //判断是否准确
            var re = /\S{3,10}/
            if(!re.test(username)) {
                alert('用户名的长度必须是3~10位的非空白字符')
            }
            $.ajax({
                url: "http://127.0.0.1:8000/api/login/",
                method: "post",
                data: {
                    username: username,
                    password: password
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
</body>
</html>